<template>
  <div
    style="
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80px;
    "
    class="animated fadeInUp"
  >
    <div class="loader-45"></div>
  </div>
</template>
<script setup></script>

<style scoped lang="scss">
@keyframes boxShadowOffset4 {
  0% {
    box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0;
  }
  33% {
    box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0;
  }
  66% {
    box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0;
  }
  100% {
    box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px;
  }
}

.loader-45 {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  color: #90cf5b;
  -webkit-animation: boxShadowOffset4 1s linear infinite alternate;
  animation: boxShadowOffset4 1s linear infinite alternate;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}
</style>
